import { create } from "zustand"

// 创建store
const useStore=create((set)=>{
    // 返回一个对象
    return {
        count:0,
        inc:()=>{
            // 此处有两种语法，一种是用到老数据，使用函数作为参数；另一种是直接使用如{count:100}作为参数
            set((state)=>({count:state.count+1}))
        },

        /* 新增 */
        channelList:[],
        fetchList:async ()=>{
            const url='http://geek.itheima.net/v1_0/channels'
            const res=await fetch(url)
            const jsonRes=await res.json()
            console.log(jsonRes)
            set({
                channelList:jsonRes.data.channels
            })
        }
        /* 新增 */
    }
})

const Zustand=()=>{
    const {count,inc,channelList,fetchList}=useStore()
    return(
        <div>
            <button onClick={inc}>{count}</button>

            {/* 新增 */}
            <button onClick={fetchList}>fetch</button>
            <ul>
                {
                    channelList.map(item=><li key={item.id}>{item.name}</li>)
                }
            </ul>
            {/* 新增 */}
            
        </div>
    )
}

export default Zustand